import React from 'react'

export default function index({ list, radioCheck, radioRemove, allCheck, type }) {
  // console.log(4, list);
  let newList
  if (type === 'all') {
    newList = list
  } else if (type === 'active') {
    newList = list.filter(item => !item.flag)
  } else if (type === 'completed') {
    newList = list.filter(item => item.flag)
  }
  return (
    <section className='main'>
      <input onChange={(e) => allCheck(e.target.checked)} className='toggle-all' checked={list.every(item => item.flag)} type='checkbox' id='toggle-all' />
      <label htmlFor='toggle-all'>Mark all as complete</label>
      <ul className='todo-list'>
        {newList.map(item => {
          return (<li key={item.id} className={item.flag ? 'completed' : ''}>
            <div className='view'>
              <input checked={item.flag} onChange={() => radioCheck(item.id)} className='toggle' type='checkbox' />
              <label>{item.content}</label>
              <button onClick={() => radioRemove(item.id)} className='destroy'></button>
            </div>
            <input className='edit' />
          </li>)
        }
        )}

      </ul>
    </section>
  )
}
